<template>
  <div>
    <div class="article">
      <div class="title">{{detail.article_title}}</div>
      <div>
        作者: {{detail.user_nickname}}
        日期: {{detail.date}}
      </div>
      <div class="content" v-html="detail.article_content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleDetail",
  data() {
    return {
      detail: {}
    };
  },
  created() {
    if (!this.$route.query.id) {
      alert("查无此文");
      return;
    }
    this.getArticleDetail(this.$route.query.id);
  },
  methods: {
    getArticleDetail: function(id) {
      let _this = this;
      this.$axios
        .get("blog/getArticleDetail", {
          params: { id: parseInt(id) }
        })
        .then(function(res) {
          _this.detail = res.data;
          console.log(res.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.article {
  width: 60%;
  padding: 5px 25px;
  min-width: 300px;
  margin: 0 auto;
  background: #eee;
  font-size: 14px;
}
.title {
  font-size: 20px;
  color: cadetblue;
  margin-top: 15px;
}

.content {
  text-align: left;
  margin: 15px;
  word-wrap: break-word;
  word-break: normal;
  overflow-x: hidden;
}
.content * {
  max-width: 100%;
}
</style>
